<template>
	<div class="az" >
		<div class="aa" style="width: 500px; margin-left: 400px;">
			<div id="app">
				<div class="i1" style="margin-bottom: 15px;">
					<router-link to="index" style="color: white;">登录</router-link>&nbsp;&nbsp;|&nbsp;&nbsp;<router-link to="login"
					 style="color: white;">注册</router-link>
				</div>
			</div>
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
				<el-form-item label="账号" prop="username">
				  <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
				  <el-input v-model.number="ruleForm.phone"></el-input>
				</el-form-item>
			  <el-form-item label="密码" prop="pass">
			    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="确认密码" prop="checkPass">
			    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
			  </el-form-item>
			  <p>
			  	<router-link to="index">已有账号？马上登录</router-link>
			  </p>
			  <el-form-item>
			    <el-button type="primary" @click="submitForm('ruleForm');">提交</el-button>
			    <el-button @click="resetForm('ruleForm')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	// import store from "../../store/modules/user.js"
	import axios from 'axios'
	export default {
		data() {
		      var checkAge = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('年龄不能为空'));
		        }
		        setTimeout(() => {
		          if (!Number.isInteger(value)) {
		            callback(new Error('请输入数字值'));
		          } else {
		            if (value < 18) {
		              callback(new Error('必须年满18岁'));
		            } else {
		              callback();
		            }
		          }
		        }, 1000);
		      };
		      var validatePass = (rule, value, callback) => {
		        if (value === '') {
		          callback(new Error('请输入密码'));
		        } else {
		          if (this.ruleForm.checkPass !== '') {
		            this.$refs.ruleForm.validateField('checkPass');
		          }
		          callback();
		        }
		      };
		      var validatePass2 = (rule, value, callback) => {
		        if (value === '') {
		          callback(new Error('请再次输入密码'));
		        } else if (value !== this.ruleForm.pass) {
		          callback(new Error('两次输入密码不一致!'));
		        } else {
		          callback();
		        }
		      };
		      return {
		        ruleForm: {
		          pass: '',
		          checkPass: '',
		          age: '',
				  username:'',
				  phone:''
				  // userList:this.store.state.userList,
				  // user:this.store.state.user
		        },
		        rules: {
		          pass: [
		            { validator: validatePass, trigger: 'blur' }
		          ],
		          checkPass: [
		            { validator: validatePass2, trigger: 'blur' }
		          ],
		          age: [
		            { validator: checkAge, trigger: 'blur' }
		          ]
		        }
		      };
		    },
		    methods: {
		      submitForm(formName) {
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
					  var params = new URLSearchParams();
					  // params.append('name', this.name);
					  params.append('username',this.ruleForm.username);
					  params.append('phone',this.ruleForm.phone);
					  params.append('password',this.ruleForm.pass);
					  var that=this;
					  axios.post('/user/insertUser',params,{
					  	header:{'Content-type':'application/x-www-form-urlencoded;charset=UTF-8'}
					  	})
					  .then(function(data) {
					  	that.$router.push({
					  		path:"/index"
					  	})
					  	
					  	
					  	console.log(data);
					  }).catch(function(Error) {
					  	console.log(Error);
					  });
					  
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
		      },
		      resetForm(formName) {
		        this.$refs[formName].resetFields();
		      }
		    },
			
		
	}
</script>
<style>
	.az {
		width: 100%;
		height: 725px;
		background: url(../../images/009.jpg);
		padding-top: 50px;
	}
</style>
